<template>
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="我是有底线的"
    @load="onLoad"
    :immediate-check = false
    class="thisout">
            <van-cell v-for="item in mylist" :key="item.filmId" class="allout" @click="more(item.filmId)">
                <div class="img"><img :src="item.poster" /></div>
                <div class="isText">
                    <div class="moveTitle">{{item.name}}</div>
                    <div>
                        <span class="chinese">观众评分:</span><span class="num">{{ item.grade }}</span>
                    </div>
                    <div class="actors">
                        <span class="chinese">
                            主演:{{item.actors.map(res => {
                                    return res.name
                                }).join("  ")
                            }}</span>
                    </div>
                    <div>
                        <span class="chinese">{{ item.nation }}</span>|<span class="num">{{ item.runtime }}</span><span class="chinese">分钟</span>
                    </div>
                </div>
            </van-cell>
    </van-list>
</template>

<script>
import vue from 'vue'
import { List } from 'vant'
import http from '@/util/http'
vue.use(List)
export default {
    created(){
        http({
            url:'/gateway?cityId=420100&pageNum=1&pageSize=10&type=1&k=2649498',
            headers:{
                'X-Host': 'mall.film-ticket.film.list' 
            }
        }).then(res=>{
            this.total = res.data.data.total
            this.mylist = res.data.data.films
            console.log(this.mylist)
        })
    },
    data(){
        return{
            mylist : [], //用于渲染列表的数组
            loading : false, //当loading为false的时候页面下拉到底会触发onLoad函数
            listnum : 1, //用于记录加载数据到第几页了
            finished : false, //当finished为true时，页面下拉到底将不会触发onLoad函数而是显示finished-text
            total : 1 //用于记录总数据数组的长度，在页面加载完全部的数据时用于将finished改为true
        }
    },
    methods:{
        more(itemid){
            this.$router.push({
                name:'lth',
                params:{
                    myid:itemid
                }
            })
        },
        // 页面下拉到底时触发onLoad函数
        onLoad(){
            // 加载完全部数据时修改finished
            console.log(this.mylist.length,this.total)
            if(this.mylist.length === this.total && this.total !== 0){
                this.finished = true
                return 
            }
            // 记录加载到了第几页数据
            this.listnum++
            // 获取对应页数的数据冰传入渲染页面的数组
            http({url:`/gateway?cityId=420100&pageNum=${this.listnum}&pageSize=10&type=1&k=2138151`,
            headers:{
                'X-Host': 'mall.film-ticket.film.list' 
            }}).then((res)=>{
                this.mylist = [...this.mylist,...res.data.data.films]
            })
            // 修改loading为false保证在数据还没加载完之前下拉页面可以再次请求数据
            this.loading = false
        }
    }
}
</script>
<style lang="scss" scoped>
.thisout{
    margin-bottom: 0.5rem;
}
.allout{
    clear: both;
    overflow: hidden;
    .img{
    float: left;
        img{
            width: 0.66rem;
            padding: 10px;
        }
    }
}
.chinese{
    font-size: 13px;
    margin-top: 4px;
    color: #797d82;
}
.moveTitle{
    max-width: calc(100% - 25px);
    color: #191a1b;
    font-size: 16px;
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.isText{
    padding: 10px;
    float: left;
}
.actors{
    max-width: 2.0rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>